<template>
	<view class="user_page">
		<NavigationTitle title="工程设备" style="color: #000;background: #fff;position: fixed;width: 100%;z-index: 5;">
			<template slot="left_con">
				<image class="back_icon" src="@/static/common/back.png" mode="widthFix"  @tap="backSelf"/>
			</template>
			<template slot="right_con">
				<uni-icons type="settings" size="30" @click="showDrawer()"></uni-icons>
			</template>
		</NavigationTitle>
		<view class="status-bar"></view>
		<!-- <view class="user_search">
			 <uni-data-select
			      v-model="value"
				  :clear="false"
			      :localdata="option_search"
			      @change="changeSel"
			    ></uni-data-select>
			<uni-search-bar class="search" radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" @confirm="search" @clear="clearSear"/>
		</view> -->
		<scroll-view class="userList" scroll-y="true" refresher-enabled="true"
               @refresherrefresh="doRefresh" 
			   @scrolltolower = "scrolltoupper"
               :refresher-triggered="pullLoading">
			<view v-if="deviceList.length==0"  class="noData">暂无数据</view>
			<text id="a"></text>
			<view class="user_item" v-for="item in deviceList" :key="item.userId">
				<view class="item_top">
					<view class="item_name" @click.stop.prevent="()=>callback('edit',item)">
						<view class="userRole">设备名称：<text>{{item.deviceName}}</text></view>
						<view class="userPhone">设备类型：<text>{{item.deviceTypeString}}</text></view>
						<view class="userPhone">设备状态：<text>{{item.deviceStatusString}}</text></view>
						<view class="userPhone">检测设备：<text>{{item.monitorDeviceName}}</text></view>
						<view class="userPhone">告警状态：<text>{{item.alarmStatus=='0'?'正常':'告警中'}}</text></view>
						<view class="userPhone">启停状态：<text>{{item.monitorDeviceStatus=='0'?'启动':'停止'}}</text></view>
					</view>
				</view>
				<view class="item_bottom"> 
					<button v-if="item.alarmStatus=='1'" size="mini" class="item_btn" @click.stop.prevent="()=>callback('clear',item)">消除告警</button>
					<button v-else size="mini" disabled class="item_btn" >消除告警</button>
					<button v-if="authorList.includes('system_device_del')" size="mini" class="item_btn" style="color: red" @click.stop.prevent="()=>callback('delete',item)">删除</button>
					<button disabled v-else size="mini" class="item_btn">删除</button>
				</view>
				
			</view>
			<uni-load-more :status='loadStatus' v-if="deviceList&&deviceList.length>3" ></uni-load-more>
		</scroll-view>
		<image v-if="authorList.includes('system_device_add')" src="@/static/common/advice_add.png"  class="userAdd" @click="addEquip" ></image>
		<uni-drawer ref="showLeft" mode="left" :width="320">
			<view class="status-bar"></view>
			<view class="drawerLeft">
				<uni-forms ref="baseForm" :modelValue="searchValue" label-position="top" class="baseForm">
					<uni-forms-item label="设备名称:">
						<uni-easyinput v-model="searchValue.deviceName" placeholder="请输入设备名称" />
					</uni-forms-item>
					<uni-forms-item label="GSP编号:">
						<uni-easyinput v-model="searchValue.gpsNumber" placeholder="请输入GSP编号" />
					</uni-forms-item>
					<uni-forms-item label="设备编号:">
						<uni-easyinput v-model="searchValue.deviceId" placeholder="请输入设备编号" />
					</uni-forms-item>
				</uni-forms>
				<view class="popupBtn">
					<button type="primary" @click="drawerConfirm" class="btn">确定</button>
					<button type="reset" @click="drawerClose" class="btn">重置</button>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	import NavigationTitle from '@/components/navigationTitle'
	import {
		showToastMsg,
		showModalMsg,
	} from '@/utils/format.js'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
			NavigationTitle
		},
		computed: {
			...mapGetters(['project','projectId','authorList'])
		},
		data() {
			return {
				searchValue : {},
				userTree:[],
				deviceList:[],
				page:{
					current:1,
					size:10,
				},
				pullLoading:false,
				loadingType:0,//加载状态
				isLoadingMore: false, // 是否正在加载更多
				loadStatus: 'more', // 是否还有更多数据
			}
		},
		// onLoad(){
		// 	this.getEquipList(this.page)
		// },
		onShow(){
			this.deviceList = []
			this.getEquipList({
					current:1,
					size:10,
			})
		},
		methods: {
			...mapActions(['save_device']),
			showDrawer() {
				this.$refs['showLeft'].open()
			},
			// 关闭窗口
			closeDrawer() {
				this.$refs['showLeft'].close()
			},
			drawerConfirm() {
				// this.$refs.baseForm.validate().then(res=>{
				// 	console.log(res)
				// })
				this.getEquipList({
					current: 1,
					size: 10,
				}, this.searchValue)
				this.closeDrawer()
			},
			drawerClose() {
				this.searchValue = {}
				this.getEquipList({
					current: 1,
					size: 10,
				}, null)
				this.closeDrawer()
			},
			goDetail(data){
				this.save_device(data)
				uni.navigateTo({ url:'/pages/equipment/detail?type=edit' })
			},
			scrolltoupper(){
				let page={
					current:this.page.current+1,
					size:10,
				}
				this.page = page
				this.getListMore(page,this.searchValue)
			},
			 doRefresh() {
				 // console.log('shuaxin')
				  this.pullLoading = true;
			      // 执行数据刷新的逻辑
			      if(!this.pullLoading) return
			      let page={
			      	current:1,
			      	size:10,
			      }
			      this.page = page
			      this.getEquipList(page,this.searchValue)
			    },
			backSelf(){
				uni.navigateBack({ delta: 1 })
			},
			addEquip(){
				uni.navigateTo({ url:'/pages/equipment/detail?type=add' })
			},
			
			async getEquipList(page,value){
				let that = this
				let param = JSON.parse(JSON.stringify(page))
				if(!this.projectId) this.backSelf()
				param.belongProject=this.projectId
				if(value){
					for(let key in value){
						param[key] = value[key]
					}
				}
				await this.$api.getEquipmentPage(param).then(res=>{
					if(res?.code==200){
						this.deviceList = res.data.records
						this.page=page
						this.loadingType = 0;
					}
					
				}).catch(err=>{
					console.log(err)
				})
				setTimeout(()=>{
					that.pullLoading = false;
				},500)
				
				
			},
			async getListMore(page,value){
				if(this.loadingType!==0) return
				this.loadStatus="loading"
				uni.showLoading({
					title:"加载中...",
					mask:true
				})
				this.loadingType =1
				let param = JSON.parse(JSON.stringify(page))
				param.belongProjectt=this.projectId
				if(value){
					for(let key in value){
						param[key] = value[key]
					}
				}
				await this.$api.getEquipmentPage(param).then(res=>{
					if(res?.code==200){
						if(res.data.records.length==0){
							this.loadingType = 2;
							this.loadStatus="noMore"
							return 
						}else if(res.data.records.length<10){
							this.loadingType = 2;
							this.loadStatus="noMore"
						}else{
							this.loadingType = 0;
							this.loadStatus="more"
						}
						this.deviceList = this.deviceList.concat(res.data.records)
						uni.hideLoading()
					}
				})
			},
			changeSel(e){
				this.value = e
			},
			search(e){
				let obj = {}
				obj[this.value] = e.value
				this.searchValue = obj
				this.getEquipList({
					current:1,
					size:10,
				},obj)
			},
			clearSear(){
				this.searchValue = {}
				this.getEquipList(this.page,null)
			},
			callback(type,data){
				if(type=='edit'){
					if(!this.authorList.includes("system_device_edit")) return showToastMsg('无操作权限！')
					 this.goDetail(data)
				}
				else if(type=='delete'){
					 this.delUser(data)
				}else if(type=='clear'){
					this.claerAlarm(data)
				}
			},
			async claerAlarm(data){
				let res =  await this.$api.claerAlarm({
					ids:data.id
				}).catch(err=>{
					showToastMsg('请求失败！')
					console.log(err)
				})
				if(res?.code==200){
					this.getEquipList({
						current:1,
						size:10,
					},null)
				}
				showToastMsg(res.msg)
			},
			async delUser(data){
				// if(!this.authorList.includes('system_device_del')) return showToastMsg('无操作权限！')
				showModalMsg('', '是否确认从项目中移除该设备',async (val)=>{
					if(val){
						await this.$api.delEquipment(data.deviceId).then(res=>{
							if(res?.code==200){
								this.getEquipList({
									current:1,
									size:10,
								},null)
							}
							showToastMsg(res.msg)
						}).catch(err=>{
							showToastMsg('请求失败！')
						})
					}
					
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
	view {
		box-sizing: border-box !important;
	}

	.user_page {
		position: relative;
		height: 100%;
	}
	.user_search{
		display: flex;
		padding: $System__title_height 12rpx 0;
		.search{
			flex: 7;
		}
		/deep/.uni-stat__select{
			flex: 3;
		}
	}
	.userList {
		height: 90vh;
		padding: $System__title_height 0 0;
		position: relative;
		/deep/ .uni-scroll-view-content{
			padding: 0 48rpx 50rpx;
			box-sizing: border-box !important;
		}
		.noData{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			color: #999;
		}
		.user_item{
			min-height: 200rpx;
			background-color: #eee;
			margin-top: 24rpx;
			border-radius: 20rpx;
			padding: 24rpx;
			box-shadow: 0rpx 5rpx 10rpx 0rpx #F0F0F0;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.item_top{
				display: flex;
				align-items: center;
				.commentImg{
					width: 50px;
					height: 50px;
				}
				.item_name{
					flex: 1;
					padding-left: 12rpx;
					font-size: 32rpx;
					&>uni-view{
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: 600;
						uni-text{
							font-weight: normal;
						}
					}
				}
			}
			.item_bottom{
				display: flex;
				justify-content: space-between;
				.item_btn{
					width: 49%;
					margin-top: 24rpx;
					
				}
			}
			
		}
	}
	.back_icon{
		width: 37rpx;
	}
	.drawerLeft {
		padding: 20rpx;
	
		.baseForm {
			padding: 20rpx 0;
			min-height: 50vh;
		}
	
		.popupBtn {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
	
			.btn {
				width: 45%;
			}
		}
	}
	.userAdd{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 200rpx;
		right: 50rpx;
	}
	
</style>
